<!--这是微信推送组件-->
<template>
<div>
  <p class="filter"></p>
  <div class="messageBox">
    <h3 class="fixTitle">
      <span>微信推送</span>
      <p>
        <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
      </p>
    </h3>
    <el-form v-loading="btnLoading" :model="postForm" :rules="rules" ref="postForm" label-width="150px" label-position="right" style="margin-top: 40px;">
      <el-form-item label="推送内容：" prop="content">
        <el-input :disabled="this.postForm.status==0?true:false" v-model.trim="postForm.content" placeholder="请输入课程" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="课程：">
        <el-input :disabled="this.postForm.status==0?true:false" v-model="postForm.title" placeholder="请输入课程" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="地点：">
        <el-input :disabled="this.postForm.status==0?true:false" v-model="postForm.address" placeholder="请输入地点" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="讲师：">
        <el-input :disabled="this.postForm.status==0?true:false" v-model="postForm.lecturer" placeholder="请输入讲师" style="width: 350px"></el-input>
      </el-form-item>
      <!--<el-form-item :label="this.courseData.liveAt ? '发布时间：' : '课程时间：'">-->
        <!--<el-date-picker v-model="postForm.createdAt" class="filter-item" type="datetime" clearable placeholder="请选择课程时间" style="width: 350px">-->
        <!--</el-date-picker>-->
      <!--</el-form-item>-->
      <el-form-item label="发布时间：">
        <el-date-picker :disabled="this.postForm.status==0?true:false" v-model="postForm.createdAt" class="filter-item" type="datetime" clearable placeholder="请选择课程时间" style="width: 350px">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="推送时间：" prop="pushTime">
        <el-date-picker :disabled="this.postForm.status==0?true:false" v-model="postForm.pushTime" class="filter-item" type="datetime" clearable placeholder="请选择推送时间" :picker-options="pickerOptions" style="width: 350px">
        </el-date-picker>
      </el-form-item>
      <p style="text-align: center;">
        <el-button type="primary" icon="el-icon-check" @click="submitForm">确认</el-button>
        <el-button v-if="this.postForm.status==1" type="info" @click="close">取消</el-button>
      </p>
    </el-form>
  </div>
</div>
</template>
<script>
import { wxPush } from '@/api/course'

const postForm = {
  content: '',
  title: null, // 课程名
  address: '',
  lecturer: null, // 讲师
  createdAt: null, // 课程时间
  pushTime: '', // 课程推送时间
  courseId: null,// 课程Id
  status: -1 //是否已发布
}

const validateTime = (rule, value, callback) => {
  if (!value) {
    callback('请输入推送时间')
  } else {
    const currentTime = Date.parse((new Date())) - 60 * 1000
    if (value < currentTime) {
      callback('推送时间不能小于当前时间')
    }
  }
  callback()
}

const rules = {
  content: [{ required: true, message: '推送内容不能为空', trigger: 'blur' }],
  pushTime: [{ required: true, trigger: 'blur', validator: validateTime }]
}

export default {
  props: ['courseData'],
  created() {
    console.log('课程推送数据', this.courseData)
    this.postForm.title = this.courseData.name
    this.postForm.lecturer = this.courseData.lecturerName
    this.postForm.content = this.courseData.content
    // this.postForm.createdAt = ((!this.courseData.liveAt) ? this.courseData.createdAt : this.courseData.liveAt)
    this.postForm.createdAt = this.courseData.createdAt
    this.postForm.pushTime = this.courseData.pushTime
    this.postForm.courseId = this.courseData.courseId
    this.postForm.status = this.courseData.status
//  this.postForm.pushTime = new Date()
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24*60*60*1000;
        }
      },
      postForm: Object.assign({}, postForm),
      rules,
      btnLoading: false,
      editDisabled: false
    }
  },
  methods: {
    close() {
      this.$emit('hideWechatPush', false)
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          console.log('推送时间：', this.postForm.pushTime)
          this.$confirm('此操作将微信推送该课程, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true
          }).then(() => {
            this.btnLoading = true
            wxPush(this.postForm).then(res => {
              if (res.data.statusCode == 200) {
                console.log('课程推送', res)
                this.btnLoading = false
                this.$message({
                  type: 'success',
                  message: '推送成功!'
                })
                this.close()
              } else {
                this.btnLoading = false
                this.$message({
                  type: 'error',
                  message: res.data.msg
                })
              }
            }).catch(err => {
              this.btnLoading = false
              console.log(err)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消推送'
            })
          })
        }
      })
    }
  }
}
</script>
<style scoped>
  h3,p {padding: 0;margin: 0;}
  .fixTitle{
    width: 600px;
    padding-left: 20px;
  }
  .messageBox {
		width: 600px;
    height: 450px;
    margin: 0 20px;
		overflow: auto;
		background: #fff;
		position: fixed;
		left: 30%;
		top: 15%;
    z-index: 200;
  }
</style>
